<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
    <h1>The Activity Demo</h1>
<table class="table">
    <thead>
    <tr>
        <th>title</th>
        <th>Category</th>
        <th>StartTime</th>
        <th>EndTime</th>
        <th>State</th>
        <th>Operation</th>
    </tr>
    </thead>
    <tbody id="tbodyId">
    <tr><td colspan="6">数据正在加载中.......</td></tr>
    </tbody>
</table>
</div>
<script src="/jquery/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript">
    function doFindActivitys(){
        var url="/activity/doFindActivitys"
        //启动ajax技术,基于GET请求方式获取服务端json数据
        //getJSON函数默认会将服务端返回的json串转换为js对象
        $.getJSON(url,function(result){
            var tBody=$("#tbodyId");
            tBody.empty();//清空原有body内容
            for(var i=0;i<result.length;i++){//循环一次,迭代一行
                //构建当前行对象
                var tr=`<tr>
                          <td>${result[i].title}</td>
                          <td>${result[i].category}</td>
                          <td>${result[i].startTime}</td>
                          <td>${result[i].endTime}</td>
                          <td>${result[i].state==1?'有效':'无效'}</td>
                          <td><button type='button' class='btn btn-danger btn-sm'>delete</button></td>
                         </tr>`
                //将每一行的内容都追加tbody中
                tBody.append(tr);
            }
        });
    };
    doFindActivitys();
</script>


</body>
</html>